import React, { useEffect, useState } from 'react';
import Http from '@/utils/NoLoginHttp';
import axios from 'axios';
//引入umi的路由事件
import { history } from 'umi';
// import Style from '@/scss/login.scss'
//此处应该引入忘记密码的scss
import Style from '@/scss/miss.scss';
import { Input, Space } from 'antd';

/*********************** 修改密码入口组件  ************************************ */
//这是修改密码组件
function ChangePwd() {
  //前面的emil类似vue的状态 后面的set是修改前面这个状态的方法
  let [newpwd, setNewPwd] = useState('');
  let [affpwd, setAffPwd] = useState('');
  return (
    <div className={Style.miss}>
      {/* <img src={miss_back} alt="" /> */}
      <div className={Style.incenter}>
        {

          <div className={Style.Inputbox1}>
            <div>
              <h1>忘记密码</h1>
            </div>
            <div>
              <h3>请输入要重置密码的账号</h3>
            </div>
            <Space direction="vertical">
              <Input.Password
                value={newpwd}
                onChange={(e) => setNewPwd(e.target.value)}
                placeholder={'请输入新密码'} />
              <Input.Password
                value={affpwd}
                onChange={(e) => setAffPwd(e.target.value)}
                placeholder={'请再次输入密码'}
              />
            </Space>
            <button onClick={() => changeUserPwd(newpwd, affpwd)}>下一步</button>
          </div>
        }
      </div>
    </div>
  );
}
/**
 * 传入新旧密码进行操作
 * @param newpwd 
 * @param affpwd 
 */
const changeUserPwd = async (newpwd, affpwd) => {
  if (!newpwd.trim() || !affpwd.trim()) { alert("填写框不可为空"); return }
  if (newpwd.trim() != affpwd.trim()) { alert("两次密码输入不一致"); return }
  let id = location.search.split("=")[1];
  let params = { id, password: newpwd }
  // Http.get("/changepwd",params)


  let result = await Http.post(`/changepwd`, params);
  // if (result.code == 200) { alert("密码修改成功,自动跳转至登录页面"); history.push('/'); }
  axios({
    method: 'patch',
    url: 'http://localhost:53000/users/' + id,
    data: { password:newpwd },
  }).then(
    (v) => {
      console.log('更新数据成功');
      alert("密码修改成功,自动跳转至登录页面")
      history.push('/')
    },
    (e) => {
      console.log(e);
    },
  );
}



export default ChangePwd;
